<template>
  <div class="home">
    <el-container>
      <el-header>
        <div>
          <i class="el-icon-s-home"></i>
          <span>课程管理系统</span>
        </div>
        <div style="display: flex;align-items: center;">
          <i class="el-icon-full-screen"></i>
          <el-avatar size="medium" style="margin-right: 10px;" src="/avatars.png"></el-avatar>
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{ $store.state.user.info.username }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu router :default-active="$route.path" background-color="#324158" text-color="#ccc"
            active-text-color="#409EFF">
            <el-menu-item :index="item.path" v-for="item in routes" :key="item.path">
              <i :class="'el-icon-' + item.meta.icon"></i>
              <span slot="title">{{ item.meta.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { logout } from '@/api/user';

export default {
  data() {
    return {
      routes: []
    }
  },
  methods: {
    handleCommand(command) {
      if (command == 'logout') {
        logout()
        // 初始化vuex
        this.$store.commit('user/updateInfo', {})
        // 跳转至登录页面
        this.$router.push('/login')
      }
    },
    getRoutes() {
      this.routes = this.$router.options.routes.find(item => item.path == '/home').children
      let group = this.$store.state.user.info.group
      this.routes = this.routes.filter(item => group.indexOf(item.meta.permission) != -1 || !item.meta.permission)
    }
  },
  mounted() {
    this.getRoutes()
  }
}
</script>

<style scoped lang="scss">
.home {
  height: 100%;

  >.el-container {
    height: 100%;
  }
}

.el-header {
  background-color: #242f41;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  line-height: 60px;
  color: white;

  i {
    margin-right: 15px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: white;
  }
}

.el-aside {
  background-color: #324158;
}

.el-menu {
  border: none;
  text-align: left;
  text-indent: 5px;
}

.el-main {
  padding: 10px;
}
</style>